<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ counts.length }}</strong></span
    >
    <ul class="filters">
      <li @click="btn('all')">
        <a :class="{ selected: isLight === 'all' }" href="javascript:;">全部</a>
      </li>
      <li @click="btn('no')">
        <a :class="{ selected: isLight === 'no' }" href="javascript:;"
          >未完成</a
        >
      </li>
      <li @click="btn('yes')">
        <a :class="{ selected: isLight === 'yes' }" href="javascript:;"
          >已完成</a
        >
      </li>
    </ul>
    <button class="clear-completed" @click="clearDone">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["counts"],
  data() {
    return {
      isLight: "all",
    };
  },
  methods: {
    btn(str) {
      this.isLight = str;
      this.$emit("myShow", str);
    },
    clearDone() {
      this.$emit("myClear");
    },
  },
};
</script>